<template>
  <el-card>
    <div style="float:left;margin:10px 0;">
      <el-input v-model.trim="params.keyword" placeholder="套餐名称" clearable style="width:200px;"
                @keyup.enter.native="search"></el-input>
      <el-select v-model="params.status" placeholder="请选择状态" style="width:120px;">
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="showAddModal" style="margin-left: 30px;">新增</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="套餐名称" prop="title" min-width="160"></el-table-column>
      <el-table-column label="价格" prop="price" min-width="120"></el-table-column>
      <el-table-column label="状态" prop="status" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1" class="enable-status">启用</span>
          <span v-if="scope.row.status === 0" class="disable-status">停用</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" min-width="300"></el-table-column>
      <el-table-column label="创建时间" prop="create_time" min-width="180"></el-table-column>
      <el-table-column label="操作" prop="op" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status === 0" type="success" size="mini" @click="updateStatus(scope.row.id, 1)">启用
          </el-button>
          <el-button v-if="scope.row.status === 1" type="danger" size="mini" @click="updateStatus(scope.row.id, 0)">停用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows" :page-count="6"
                   :total="total" @current-change="searchPage"></el-pagination>

    <el-dialog :visible="showMergeDialog" width="450px" @close="showMergeDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">{{opTitle}}</div>

      <el-form ref="ruleForm" label-position="left" label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="标题：" prop="title">
          <el-input v-model.trim="formData.title" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="价格：" prop="price">
          <el-input-number v-model="formData.price" :precision="0" :step="5" :min="5" :max="9999" style="width:300px;"></el-input-number>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model.trim="formData.description" type="textarea"
                    :rows="2" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item v-if="opType == 1" label="是否启用：" prop="status">
          <el-select v-model="formData.status" placeholder="请选择状态" style="width:300px;">
            <el-option
              v-for="item in enableTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeDialog = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

  </el-card>
</template>

<script>

    import api from '../../../utils/api';

    export default {
        name: "PackageInfo",
        data() {
            return {
                statusList: [
                    {label: '全部状态', value: -1},
                    {label: '启用', value: 1},
                    {label: '停用', value: 0}
                ],
                params: {
                    rows: 10,
                    page: 1,
                    keyword: '',
                    status: -1,
                },
                total: 0,
                tableData: [],

                showMergeDialog: false,
                enableTypeList: [
                    {label: '启用', value: 1},
                    {label: '停用', value: 0}
                ],
                opType: 1,//1新增 2编辑 3详情
                opTitle: '',
                formData: {},
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
            search() {
                this.searchPage(1);
            },
            searchPage(page) {
                var that = this;
                that.params.page = page;
                if(!that.params.status && that.params.status != 0){
                    that.params.status = -1;
                }
                api.ajax.get('/combo/page/' + that.params.rows + '/' + that.params.page +
                    '?keyword=' + that.params.keyword + '&status=' + that.params.status).then((result) => {
                    var data = result.data;
                    that.tableData = data.list;
                    that.total = data.total;
                }, function (result) {
                    that.$alert("获取套餐列表异常", '失败!');
                })
            },
            showAddModal() {
                this.opType = 1;
                this.opTitle = '新增';
                this.formData = {
                    title: '',
                    price: 5,
                    description: '',
                    status: 1
                };
                this.showMergeDialog = true;
            },
            edit(row) {
                this.opType = 2;
                this.opTitle = '编辑';
                this.formData = {
                    id: row.id,
                    title: row.title,
                    price: row.price,
                    status: row.status,
                    description: row.description,
                };
                this.showMergeDialog = true;
            },
            save() {
                var that = this;
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        if (this.opType === 1) {
                            api.ajax.post('combo/add', that.formData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('新增成功');
                                        that.showMergeDialog = false;
                                        that.search();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("新增异常", '失败!');
                                })
                        } else {
                            api.ajax.post('combo/update', that.formData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('修改成功');
                                        that.showMergeDialog = false;
                                        that.search();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("修改异常", '失败!');
                                })
                        }
                    } else {
                        return false;
                    }
                });
            },
            updateStatus(cid, status) {
                var that = this;
                api.ajax.post('/combo/update/' + cid + '/' + status).then((result) => {
                    that.search();
                    let content = status === 0 ? '停用' : '启用';
                    that.$message.success(content + '成功');
                }, function (result) {
                    that.$alert("修改状态异常", '失败!');
                })
            },
        },
        activated() {
            this.search();
        },
        created() {
        }
    }
</script>

<style scoped>
  .enable-status {
    padding: 5px;
    background-color: #20A0FF;
    color: white;
    border: 1px #20A0FF solid;
    border-radius: 80%;
  }

  .disable-status {
    padding: 5px;
    background-color: #F78989;
    color: white;
    border: 1px #F78989 solid;
    border-radius: 80%;
  }
</style>
